<template>
  <div class="weather-container">
    <div class="time-section">
      <span class="time">{{ currentTime }}</span>
      <span class="date">{{ currentDate }}</span>
    </div>
    <!-- <div class="weather-section">
      <el-icon class="weather-icon"><Sunny /></el-icon>
      <span class="temperature">{{ temperature }}</span>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { Sunny } from "@element-plus/icons-vue";
const currentTime = ref("");
const currentDate = ref("");
const temperature = ref("30-38℃");
const updateDateTime = () => {
  const now = new Date();
  const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

  // 更新时间
  currentTime.value = now.toLocaleTimeString("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  });

  // 更新日期
  currentDate.value = `${weekdays[now.getDay()]} ${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
};

let timer;

onMounted(() => {
  updateDateTime();
  timer = setInterval(updateDateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.weather-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 40px;
  color: white;
  font-family: "Microsoft YaHei", sans-serif;
}

.time-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time {
  font-size: 26px;
  font-weight: bold;
}

.date {
  font-size: 26px;
}

.weather-section {
  margin-left: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-icon {
  font-size: 26px;
  color: #ffd700;
}

.temperature {
  font-size: 26px;
}
</style>
